<template>
<div >
<!--  文件记录   -->
<!--  <el-page-header @back="goBack" title="文件" content="文件管理" ></el-page-header>-->


    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="文件下载" name="FileDownload">

        <!--    高查    -->
        <el-row justify="start">
          <el-col :span="24">
            <div style="margin-top: 15px;">
              <el-form :inline="true" v-model="recordFileFormData"  class="demo-form-inline">

                <el-form-item >
                  <el-input v-model="recordFileFormData.fileName" placeholder="文件名称" ></el-input>
                </el-form-item>
                <el-form-item >
                <el-input v-model="recordFileFormData.fileUploadPerson" placeholder="上传人" ></el-input>
                </el-form-item>
                <el-form-item >
                  <el-select v-model="recordFileFormData.fileTypeId" placeholder="文件类型">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for=" ft in queryFileTypeSelect" :key="ft.id" :label="ft.typename" :value="ft.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getRecordFile">查询</el-button>
                </el-form-item>
<!--  文件上传    -->
<!--                <el-button icon="el-icon-tickets" type="primary" style="position: relative;overflow: hidden;margin-right: 60px;">文件上传-->
<!--                  <div id="clone_input">-->
<!--                    <input style="position: absolute;top: 0;left: 0;width: 120px;height: 50px;opacity: 0;" type="file" />-->
<!--                  </div>-->
<!--                </el-button>-->
                <el-button icon="el-icon-tickets" @click="fileShangChuan" >文件上传</el-button>


              </el-form>
            </div>
          </el-col>
        </el-row>


        <el-table
            :data="recordFileData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="编号">
          </el-table-column>
          <el-table-column
              prop="fileName"
              label="文件名称">
          </el-table-column>
          <el-table-column
              prop="typeName"
              label="文件类型">
          </el-table-column>
          <el-table-column
              prop="fileUploadPerson"
              label="上传人">
          </el-table-column>
          <el-table-column
              prop="fileUploadDate"
              label="上传时间">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button @click="queryFile(scope.row)" type="primary" round size="small">查看文件</el-button>
              <el-button @click="downloadFile(scope.row)" type="success" round size="small">下载文件</el-button>

            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2, 4, 6, 8]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total">
        </el-pagination>


      </el-tab-pane>

      <el-tab-pane label="我的文件" name="MyFile">
<MyRecordFile></MyRecordFile>
      </el-tab-pane>
    </el-tabs>


<!--   文件上传对话框  -->
  <el-dialog
      title="文件上传"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

    <el-form label-position="top"  :model="addFileForm">
      <el-form-item label="文件名称">
        <el-input v-model="addFileForm.fileName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="文件类型">
        <el-select v-model="addFileForm.fileTypeId" placeholder="请选择">
          <el-option v-for=" ft in queryFileTypeSelect" :key="ft.id" :label="ft.typename" :value="ft.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择文件">



        <el-upload
            style="height: 10px"
            ref="upload"
            action=""
            :before-upload="beforeUpload"
            :http-request="addFile"
            :limit=1>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>


      </el-form-item>
    </el-form>


    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" addRecordFile">确 定</el-button>
  </span>
  </el-dialog>

<!--  查看文件对话框  -->
  <el-dialog
      title="查看文件"
      :visible.sync="getImgDia"
      width="30%">

    <div class="block">
<!--      <span class="demonstration">文件:</span>-->
      <el-image :src="imgSrc"  :preview-src-list="imgSrcs" @click="datu">
        <div slot="error" class="image-slot">
<!--          <i class="el-icon-picture-outline"></i>-->
          <div class="imgjiazai">图片加载失败...</div>
        </div>
      </el-image>
    </div>
  </el-dialog>

</div>
</template>

<script>
//  导入我的文件组件
import MyRecordFile from "./MyRecordFile";


export default {
  name: "recordFile",
  components:{MyRecordFile},
  data(){
    return{
      Loading:true,
      pageData:{}, // 存放分页数据
      activeName:"FileDownload", // 控制显示页面
      recordFileFormData:{
        getType:"recordFile",// 标识这个get请求时做什么的
        pageCur:"1",//页码
        pageSize:"2"//每页显示多少
      }, // 高级查询数据
      recordFileData:[],// 表格数据
      queryFileTypeSelect:[], // fileType下拉框数据
      dialogVisible:false,// 控制对话框
      addFileForm:{
        fileUploadDate:"",// 当前时间
        filePath:"",
        fileUploadPerson:JSON.parse(localStorage["user"])[0].userRealname
      },
      file:"",
      fileName:'',
      imgSrc:"", // 文件路径
      imgSrcs:[], //大图预览
      getImgDia:false, // 查看图片对话框

    }
  },
  created() {
    this.getRecordFile();
this.queryFileType();
  },
  methods:{

    handleClick(){
      this.Loading = true
    },
    goBack(){
      this.$router.go(-1)
    },
    getRecordFile(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("recordFile",{params:this.recordFileFormData})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.recordFileData=res.data.data.list
        this.pageData = res.data.data
        this.Loading = false
      })
      .catch()
    },
    queryFileType(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("fileType",{params:{getType:"select"}})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.queryFileTypeSelect=res.data.data
      })
      .catch()
    },
    handleSizeChange(val){
      this.recordFileFormData.pageSize=val
      this.getRecordFile();
    },
    handleCurrentChange(val){
      this.recordFileFormData.pageCur=val
      this.getRecordFile()

    },
    downloadFile(row){// 下载操作
document.location.href=row.filePath

    },
    queryFile(row){// 查看操作
      if(row.fileTypeId != 1){

        this.$message({
          type: 'warning',
          message: "此文件不支持在线预览"
        });

      }else {
        this.imgSrc = row.filePath

        this.getImgDia = true
        this.imgSrcs.push(row.filePath)
      }
    },
    datu(){
      this.getImgDia=false
    },
    fileShangChuan(){
      this.dialogVisible=true
    },
    handleClose(done) {
      this.$confirm('确认放弃文件上传!')
          .then(() => {
            done();
          })
          .catch( () => {});
    },
    beforeUpload(file){
      this.file=file
      this.fileName=file.name
    },

    addFile(){// 上传文件
    //   let formatData=new FormData();
    // formatData.append('file',this.file,this.fileName)
    //   let requestConfig={
    //     headers:{
    //       'Content-Type':'multipart/form-data'
    //     }
    //   }
    //     this.$http.post("file", formatData,requestConfig)
    //   .then(res => {
    //     this.addFileForm.filePath =res.data.data
    //   })
    },
addRecordFile(){// 添加
  if(this.file == '' || this.fileName == '' || this.file == null || this.fileName == null){
    this.$message.error('未选择文件!');
return
  }
      this.addFileForm.fileUploadDate=new Date().toLocaleDateString() // 获取上传日期

  let formatData=new FormData(); // 点击添加按钮先上传文件 成功回调获取文件地址并添加到表
  formatData.append('file',this.file,this.fileName)
  let requestConfig={
    headers:{
      'Content-Type':'multipart/form-data'
    }
  }
  this.$http.post("file", formatData,requestConfig)
      .then(res => {
        const loading = this.$loading({
          lock: true,
          text: '正在载入...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.addFileForm.filePath =res.data.data

        this.$http.post("recordFile",this.addFileForm)
            .then( () => {
              setTimeout(() => {
                loading.close();
              });
              this.dialogVisible = false
            })

      })


// this.$http.post("recordFile",this.addFileForm)
//   .then(
//       this.dialogVisible=false
//   )

}

  }
}
</script>

<style scoped>

.block {
  height: 300px;
  text-align: center;
  /*width: 100px;*/
}

.imgjiazai{
  font-size: 20px;
}

</style>